// window.onload
pub.bind(window,'load',function(){
    // console.log(1);
    var span=document.querySelector('.topbar_register span');
    var i=document.querySelector('.topbar_register i');
    var dls=document.querySelector('.topbar_register .box-tan');
    var out=document.getElementsByClassName('box-tc')[0];
    console.log(span,i,dls,out);
    if(localStorage.login=='true'){
        span.style.display='none';
        i.style.display='block';
        i.onmouseenter=function(){
            dls.style.display='block';
            out.onclick=function(){
               localStorage.login=false
                history.go(0);  
            }
            dls.onmouseleave=function(){
                dls.style.display='none';
            }
        }

    }else{
        span.style.display='block';
        i.style.display='none';
    }
    
    // 获取轮播图的ul dl
    var ban=document.getElementsByClassName('banner_list')[0];
    var dl=document.querySelector('.banner dl');
    // console.log(ban,dl);
    // 预先存放两个空字符串，用于接收数组中的数据
    var bstr='',
        tstr='';
    // 将数组中的每一个src和title里的内容分别添加到相应的空字符串之中
    for(var i=0;i<bannerData.length;i++){
        // 将每个src添加到bstr中，注意一定是+=，否则只能加入最后一组的src,同时要将格式加入进去
        bstr += '<li><img src="' + bannerData[i].src + '" alt=""></li>';
        // 将每个title添加到tstr中，注意一定是+=，否则只能加入最后一组的tstr，同时要将格式加入进去
        tstr+= '<dd class="">' + bannerData[i].title + '</dd>';
    }
    // 将添加完成的tstr,bstr分别放入ul和dl之中；
    ban.innerHTML=bstr;
    dl.innerHTML=tstr;
    // 获取ul，dl中的li,dl集合
    var lis=ban.querySelectorAll('li');
    var dds=dl.querySelectorAll('dd');
    // console.log(lis,dds);
    // 给第一个li和dd添加默认开始状态的类名
    lis[0].className='active';
    dds[0].className='iconfont icon-zuojiantou1';
    // 不知道初始是第几张图，设定为0，即为第一张图
    var n=0;
    // 声明间隔定时器，同时开启
    var t=setInterval(auto,3000);
    // 给dl添加鼠标移入事件，当鼠标进入dl，定时器暂停
    dl.onmouseenter=function(){
        clearInterval(t);
    }
    // 给dl添加鼠标移除事件，当鼠标离开dl，定时器再离开时li停留的界面继续开始计时
    dl.onmouseleave=function(){
        t=setInterval(auto,3000);
    }
    // 定时器具体的执行函数
    function auto(){
        // 依次递增0-1-2-3-4-0
        n++;
        // 判断，当轮播图到达最后一张的时候返回第一张
        if(n==lis.length){
            n=0
        };
        // 利用for循环，进行排他，将所有的li或者dd回复到默认状态
        for(var i=0;i<lis.length;i++){
            // 调用缓冲事件，让已经有透明度变为1的缓冲变为0；
            pub.buffMove(lis[i],{opacity:0});
            // 所有dd的类名变为空
            dds[i].className='';
        }
        // 调用缓冲事件，让正在展示的li变为下一张li有缓冲进行
        pub.buffMove(lis[n],{opacity:100});
        // 让dd的类名为iconfont icon-zuojiantou1，显示小三角
        dds[n].className='iconfont icon-zuojiantou1';
    }
    // 利用for循环，让每一个dd和li的下标同步
    for(var i=0;i<dds.length;i++){
        // 利用自定义属性，收集下标集合
        dds[i].index=i;//i=0,1,2,3,4
        // 给每一个dd添加移入事件
        dds[i].onmouseenter=function(){
            // 点击的每一个dd，所对应的自定义属性变为index-1,因为接下来会调用定时器函数，函数中有n++，那么一开始就从下标1开始了，减去之后就回到0
            n=this.index-1;
            // 调用定时器函数
            auto();
        }
    }



    // 渲染同步课程数据
    // 获取到data里面的所有同步课程的数据，声明在变量fa之中；然后获取同步课程中的ul
    var  fa=lesson.online;
    var  toul=document.querySelector('.box-tb .tb_list');
    // console.log(fa,toul);
    // 创建一个空的字符串，用来接收data同步课程的数据
    var  tour='';
    // 利用for循环，将每一个data的同步课程数组添加到空字符串之中
    for(var i=0;i<fa.length;i++){
        // 添加每一个数据，同时要将原有格式和自己已经有样式的类名加上
        tour+='<li>\
            <img src="' + fa[i].src + '" alt="加载失败">\
            <span class="list_rj">' + fa[i].cont + '</span>\
            <span class="list_xx">' + fa[i].num + '人正在学习</span>\
                <p>' + fa[i].title + '</p>\
                <i>' + fa[i].time + '课时</i>\
        <a href="./pages/detail.html" target="_blank" title="免费学习">' + (fa[i].isFree ? '免费学习' : '付费学习') + '</a>\
    </li>';
      
}
    // console.log(tour);  
   toul.innerHTML=tour;
   
    // 渲染在线测试
    var  fa1=lesson.test;
    var  zxul=document.querySelector('.box-zx .tb_list');
    // console.log(fa1,zxul);
    var  zxur='';
    for(var i=0;i<fa1.length;i++){
        zxur+='<li>\
        <img src="' + fa1[i].src + '" alt="加载失败">\
        <span class="list_rj">' + fa1[i].cont + '</span>\
        <span class="list_ks">' + fa1[i].num + '人正在学习<i>' + fa1[i].time + '</i></span>\<p class="list_st">' + fa1[i].title + '</p>\<i>题</i>\<a href="./pages/detail.html" target="_blank" title="免费学习">' + (fa1[i].isFree ? '免费学习' : '付费学习') + '</a>\
    </li>';
    }
    // console.log(zxur);
    zxul.innerHTML=zxur;

    // 渲染精品课程
    var  fa2=lesson.good;
    var  jpul=document.querySelector('.box-jp .jb_list');
    // console.log(fa2,jpul);
    var  jpur='';
    for(var i=0;i<fa2.length;i++){
        jpur+='<li>\
        <img src="' + fa2[i].src + '" alt="加载失败">\
        <span class="list_rj">' + fa2[i].cont + '</span>\
        <span class="list_xx">' + fa2[i].num + '人正在学习</span>\
            <p>' + fa2[i].title + '</p>\
            <i>' + fa2[i].time + '课时</i>\
    <a href="./pages/detail.html" target="_blank" title="免费学习">' + (fa2[i].isFree ? '免费学习' : '付费学习') + '</a>\
    </li>';
    }
    // console.log(jpur);
    jpul.innerHTML=jpur;

    // 获取菜单栏三个li(返回顶部)
    var cul=document.querySelector('.box_button');
    var clis=cul.querySelectorAll('li');
    // console.log(cul,clis);
     document.lef=null;
    //  当页面滚到到300之前li不显示，之后再显示
    window.onscroll=function(){
        var res=document.body.scrollTop||document.documentElement.scrollTop;
        if(res>=300){
            cul.style.display='block';
        }else{
            cul.style.display='none'
        }
    }
    // 给每个li添加缓冲移动事件
    var t=null;
    clis[0].onclick=function(){ 
        move1(430);
   }
    clis[1].onclick=function(){
        move1(1290);
    }
    clis[2].onclick=function(){
        move1(0);
    };
    // 缓冲移动的封存事件
    function move1(target){
        clearInterval(t);
        t = setInterval(function () {
            var start =document.documentElement.scrollTop;
                var speed = (target - start) / 20;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                console.log(speed);
                var end = start + speed;   
                if(end==target||speed==1||speed==-1){
                clearInterval(t);   
            }
            document.documentElement.scrollTop=end;
        }, 20);
    }
    // 鼠标移到课程，显示付费和机构选项
    var searchbox=document.querySelector('.searchbox_course');
    var sul=document.querySelector('.searchbox_course ul');
    var i=document.querySelector('.searchbox_course i');
    console.log(searchbox,sul,i);
    searchbox.onmouseenter=function(){
        sul.style.display='block';
        i.style.transform='rotate(-90deg)'; 
    }
    searchbox.onmouseleave=function(){
        sul.style.display='none';
        i.style.transform='';
        }








})